<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8"> 
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.menu {
				border: 1px solid #337ab7;
			}
			
			.sub-menu {
				border: none;
			}
			
			.menu li {
				cursor: pointer;
			}
			
			.menu>li {
				background: #337ab7;
				color: #FFFFFF;
			}
		</style>
		<script type="text/javascript">
			jQuery(document).ready(function() {
				var tree = [{
					text: "Parent 1",
					nodes: [{
						text: "Child 1",
						nodes: [{
							text: "Grandchild 1"
						}, {
							text: "Grandchild 2"
						}]
					}, {
						text: "Child 2"
					}]
				}, {
					text: "Parent 2"
				}, {
					text: "Parent 3"
				}, {
					text: "Parent 4"
				}, {
					text: "Parent 5"
				}];
				$("#tree").treeview({
					data: tree
				});

				function kc_catalog(cos) {
					var course = cos;
					$("#frame").load("create_course.html .sub-htm", "", function() {
						var str = "创建";
						if (course != null) {
							str = "编辑";
							$("#kcid").val(course.id);
							$("#kc-name").val(course.name);
							$("#kc-descript").val(course.descript);
						}
						$("#path").html("<li><a href='#'>课程管理</a></li><li class='active'>" + str + "</li>");
						$("#save-course").click(function() {
							$.ajax({
								type: "post",
								url: "savecourse",
								data: $("#course").serialize(),
								success: function(kc) {
									alert("成功！");
									if (course != null) return;
									$("#kcgl").append("<li kcid='" + kc.id + "' kcdp='" + kc.descript + "'>" + kc.name + "</li>");
									$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
								}
							});
						});
					});
				}
				
				$.get("getcourse", "", function(data) {
					$.each(data, function(index, element) {
						$("#kcgl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");
						$("#kcgl").children("[kcid='" + element.id + "']").click(function() {
							var ele = element;
							kc_catalog(ele);
						});
					});
					$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
				});
				
				
				$("#create-course").click(function() {
					kc_catalog();
				});
				
				$("#create-catalog").click(function () {
					$("#frame").load("contenttype.html #ctype","",function () {
						$("#tree").treeview({data:tree});
					});					
				});
			});
		</script>
	</head>

	<body>
		<div class="container">
			<nav class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="main.html" class="navbar-brand">课程管理系统</a>
				</div>
				<p class="navbar-text navbar-right" style="margin-right: 20px;">角色</p>
			</nav>
			<div class="row">
				<div class="col-md-2">
					<ul class="list-group menu">
						<li class="list-group-item" data-toggle="collapse" data-target="#kcgl" id="create-course">课程管理</li>
						<div id="kcgl" class="collapse">							
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="nrfl" id="create-catalog">内容分类</li>
						<div id="nrfl" class="collapse list-group">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="xsgl">学生管理</li>
						<div id="xsgl" class="collapse list-group">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="zlgl">资料管理</li>
					</ul>
				</div>
				<div class="col-md-10">
					<ol class="breadcrumb" id="path">
						<li><a href="#">Home</a></li>
						<li><a href="#">Library</a></li>
						<li class="active">Data</li>
					</ol>
					<div id="frame">

					</div>
				</div>
			</div>
		</div>
	</body>

</html>